import React from 'react';
import styles from './style';
import { View, Text, SafeAreaView, Image, ScrollView, TouchableOpacity } from 'react-native';
import * as Animatable from 'react-native-animatable';
const seachIcon = require('../../img/search.png');
import ListImg from '../../../../common/component/listImg';
import { getAllPhotosType } from '../../../../common/api/photosType';
import { getPhotosList } from '../../../../common/api/photos';
import { getPhotosHotList } from '../../../../common/api/photosProfile';
export default class Hot extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tab: [],
            isClick: 0,
            list: [],
        };
    }
    async componentDidMount() {
        await this.getTabs();
        this.getHotListData();
    }
    getListData = async photosType => {
        const list = await getPhotosList({ photosType });
        this.setState({
            list,
        });
    };
    getHotListData = async () => {
        const list = await getPhotosHotList();
        this.setState({
            list,
        });
    };

    getTabs = async () => {
        const tabs = await getAllPhotosType();
        tabs.unshift({ title: '热门' });
        this.setState({
            tab: tabs,
        });
        return tabs;
    };
    viewclick = i => {
        this.setState({ isClick: i });
        this[`view${i}`].rubberBand();
        if (i === 0) {
            return this.getHotListData();
        }
        this.getListData(this.state.tab[i]._id);
    };
    handleViewRef(ref, index) {
        this[`view${index}`] = ref;
    }
    render() {
        let { navigation } = this.props;
        let { tab, isClick, list } = this.state;

        return (
            <SafeAreaView style={styles.content}>
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    style={styles.scrollStyle}
                >
                    {tab.map((item, index) => {
                        return (
                            <View key={index}>
                                <TouchableOpacity
                                    activeOpacity={1}
                                    onPress={() => this.viewclick(index)}
                                    style={[
                                        styles.tabItem,
                                        { backgroundColor: isClick == index ? '#333' : '#fff' },
                                    ]}
                                >
                                    <Animatable.View ref={ref => this.handleViewRef(ref, index)}>
                                        <Text style={[{ color: isClick == index ? '#fff' : '#333' }]}>
                                            {item.title}
                                        </Text>
                                    </Animatable.View>
                                </TouchableOpacity>
                            </View>
                        );
                    })}
                </ScrollView>
                <TouchableOpacity style={styles.searchBtn} onPress={() => navigation.navigate('Search')}>
                    <Image source={seachIcon} style={styles.searchImg}></Image>
                </TouchableOpacity>
                <View style={styles.listImg}>
                    <ListImg navigation={navigation} list={list} />
                </View>
            </SafeAreaView>
        );
    }
}
